<template class="main-container">
  <div class="main-box">
    <div class="left-box">
      <div class="vip-box">
        <div class="vip-box-top">
          <el-avatar v-if="user.re.memberAvatar" shape="square" class="avatar" :src="user.re.memberAvatar" />
          <el-avatar v-else shape="square" class="avatar" src="https://oss.jtmckj.com/pc/images/vip/vip-default.png" />
          <ul class="vip-name-box">
            <li class="name">会员：{{ user.re.name }}
              <el-button class="edit-btn" v-if="user.re.name !='--'" :class="{ 'disabled': user.re.cardList[currentCard].cardState === '冻结' }"
                 @click="handleEditVip">编辑
              </el-button>
            </li>
            <li class="name">电话：{{ user.re.mobile }}</li>
            <li class="name">性别：{{ user.re.sex }}</li>
            <li class="name">会员生日：{{ user.re.birthday }}</li>
            <li class="name">会员卡张数：{{ user.re.cardList.length }}</li>
          </ul>
        </div>
        <div class="vip-box-bottom" v-if="user.re.memberCode">
          <div class="left" @click="handleLeft"></div>
          <div class="card" :class="{ 'disabled': user.re.cardList[currentCard].cardState === '冻结' }"
            :style="{ 'background-image': 'url(https://oss.jtmckj.com/pc/images/vip/vip1.png)' }">
            <div class="card-name">{{ user.re.cardList[currentCard].cardName }}</div>
            <div class="card-no">NO.{{ user.re.cardList[currentCard].cardNo }}</div>
            <div class="card-quanyi-box" v-if="user.re.cardList[currentCard].isPayCard == '1'">
              <img v-if="user.re.cardList[currentCard].memberIsPayCard === '0'" class="shengji"
                src="https://oss.jtmckj.com/pc/images/vip/shengji.png" alt="" @click="handleLevelUp">
              <img v-if="user.re.cardList[currentCard].memberIsPayCard === '1'" class="quanyi"
                src="https://oss.jtmckj.com/pc/images/vip/quanyi.png" alt="">
              <span class="font-size-14" v-if="user.re.cardList[currentCard].memberIsPayCard === '1'"> 到期时间{{
                user.re.cardList[currentCard].payCardExpireDate }}</span>
            </div>
          </div>
          <div class="right" @click="handleRight"></div>
        </div>
        <div class="vip-box-bottom" v-else>
          <div class="left" @click="handleLeft"></div>
          <div class="card" :class="{ 'disabled': user.re.cardList[currentCard].cardState === '冻结' }"
            :style="{ 'background-image': 'url(https://oss.jtmckj.com/pc/images/vip/vip1.png)' }">
            <div class="card-name">{{ user.re.cardList[currentCard].cardName }}</div>
            <div class="card-no">NO.{{ user.re.cardList[currentCard].cardNo }}</div>
            <div class="card-quanyi-box" v-if="user.re.cardList[currentCard].isPayCard == '1'">
              <img v-if="user.re.cardList[currentCard].memberIsPayCard === '0'" class="shengji"
                src="https://oss.jtmckj.com/pc/images/vip/shengji.png" alt="" @click="handleLevelUp">
              <img v-if="user.re.cardList[currentCard].memberIsPayCard === '1'" class="quanyi"
                src="https://oss.jtmckj.com/pc/images/vip/quanyi.png" alt="">
              <span class="font-size-14" v-if="user.re.cardList[currentCard].memberIsPayCard === '1'"> 到期时间{{
                user.re.cardList[currentCard].payCardExpireDate }}</span>
            </div>
          </div>
          <div class="right" @click="handleRight"></div>
        </div>
      </div>
      <div class="vip-info-box">
        <div class="vip-info-total">
          <div class="total-num">{{ user.re.cardList[currentCard].currentAmtAct }}</div>
          <div class="total-font">总余额</div>
        </div>
        <div class="money-box">
          <div class="money">
            <div class="money-num">{{ user.re.cardList[currentCard].currentAmt }}</div>
            <div class="money-font">本金余额</div>
          </div>
          <div class="money">
            <div class="money-num">{{ user.re.cardList[currentCard].currentPresentAmt }}</div>
            <div class="money-font">赠送余额</div>
          </div>
          <div class="money">
            <div class="money-num">{{ user.re.cardList[currentCard].currentCoins }}</div>
            <div class="money-font">卡内金币</div>
          </div>
          <div class="money">
            <div class="money-num">{{ user.re.cardList[currentCard].currentPoint }}</div>
            <div class="money-font">卡内积分</div>
          </div>
          <div class="money">
            <div class="money-num">{{ user.re.cardList[currentCard].ticketCount }}</div>
            <div class="money-font">优惠券</div>
          </div>
        </div>
        <div class="card-date">
          <div>
            <div class="mb-15">办卡日期：{{ user.re.cardList[currentCard].openDate }}</div>
            <div class="mb-15">卡有效期：{{ user.re.cardList[currentCard].expireDate }}</div>
            <div class="mb-15">累计金币使用：￥{{ user.re.cardList[currentCard].consumeCoinsTotal }}</div>
          </div>
          <div style="margin-left: 64px;">
            <div class="mb-15">卡状态：<span style="color: #FF6A00;">{{ user.re.cardList[currentCard].cardState
            }}</span>
            </div>
            <div class="mb-15">累计消费：￥{{ user.re.cardList[currentCard].consumeTotal }}</div>
            <div class="mb-15">累计充值：￥{{ user.re.cardList[currentCard].chargeAmtTotal }}</div>
          </div>
        </div>
        <div class="vip-info-box-disabled" v-show="user.re.cardList[currentCard].cardState == '冻结'"></div>
      </div>
      <!-- <div class="vip-box-bottom" v-if="!user.re.memberCode" style="height: 275px;"></div> -->
      <div class="left-action-row">
        <el-button v-has-role-show="'member-rechargeLog'" class="button" @click="handleReport('1')">充值记录</el-button>
        <el-button v-has-role-show="'member-consumeLog'" class="button" @click="handleReport('2')">消费记录</el-button>
        <el-button v-has-role-show="'member-pointsLog'" class="button" @click="handleReport('3')">积分记录</el-button>
        <el-button v-has-role-show="'member-cardTicket'" class="button" @click="handleReport('4')">卡券记录</el-button>
      </div>
    </div>
    <div class="right-box">
      <div class="mobile-font">请输入会员手机号</div>
      <div class="mobile-tip">请输入手机号，点击搜索或按回车，会员信息将显示在左侧列表</div>
      <div class="input-box">
        <el-input v-model="mobile" placeholder="输入手机号" size="large" @keyup.enter="search" clearable autocomplete="off">
          <template #append>
            <el-button class="search-btn" @click="search">搜索</el-button>
          </template>
        </el-input>
        <!-- <div class="search-button-div"><el-button class="search-button">搜索</el-button></div> -->
        <div>
          <div class="queue-right-btn">
            <div class="btn-items">
              <div class="item" @click="handleNum('1')">1</div>
              <div class="item" @click="handleNum('2')">2</div>
              <div class="item" @click="handleNum('3')">3</div>
              <div class="item spe" style="margin-right: 0;" @click="handleDelLastNum()"></div>
            </div>
            <div class="btn-items">
              <div class="item" @click="handleNum('4')">4</div>
              <div class="item" @click="handleNum('5')">5</div>
              <div class="item" @click="handleNum('6')">6</div>
              <div class="item" style="margin-right: 0;" @click="handleDelNum()">删除</div>
            </div>
            <div class="btn-items">
              <div class="item" @click="handleNum('7')">7</div>
              <div class="item" @click="handleNum('8')">8</div>
              <div class="item" @click="handleNum('9')">9</div>
              <div class="item" style="margin-right: 0;" @click="handleNum('0')">0</div>
            </div>
          </div>
        </div>
        <div class="act-btn-box" style="margin-top: 40px;">
          <el-button v-has-role-show="'member-recharge'" class="act-btn" :class="{ 'disabled': user.re.cardList[currentCard].cardState === '冻结' }" :disabled="user.re.cardList[currentCard].cardState == '冻结'" @click="handleStored">充值</el-button>
          <el-button v-has-role-show="'member-adjust'" class="act-btn" :class="{ 'disabled': user.re.cardList[currentCard].cardState === '冻结' }" :disabled="user.re.cardList[currentCard].cardState == '冻结'" @click="handleAdjust">调账</el-button>
          <el-button v-has-role-show="'member-giftTicket'" class="act-btn" @click="handleSend">赠金币/券</el-button>
          <el-button v-has-role-show="'member-pointsExchange'" class="act-btn" :class="{ 'disabled': user.re.cardList[currentCard].cardState === '冻结' }" :disabled="user.re.cardList[currentCard].cardState == '冻结'" @click="handlePoint">积分兑换</el-button>
          <!-- <el-button class="act-btn" :class="{ 'disabled': user.re.cardList[currentCard].cardState === '冻结' }" :disabled="user.re.cardList[currentCard].cardState == '冻结'" @click="handleEditVip">编辑资料</el-button> -->
        </div>
        <div class="act-btn-box" style="margin-top: 20px;">
          <el-button v-has-role-show="'member-lock'" class="act-btn" :class="{ 'jiedong': user.re.cardList[currentCard].cardState === '冻结' }" @click="handleFreeze">{{ user.re.cardList[currentCard].cardState == '冻结' ? '解冻' : '冻结' }}</el-button>
          <el-button v-has-role-show="'member-transfer'" class="act-btn" :class="{ 'disabled': user.re.cardList[currentCard].cardState === '冻结' }" :disabled="user.re.cardList[currentCard].cardState == '冻结'" @click="handleTransfer">资产转移</el-button>
          <el-button v-has-role-show="'member-blacklist'" class="act-btn" @click="handleBlack">加入黑名单</el-button>
          <el-button v-has-role-show="'member-logout'" class="act-btn zhuxiao" @click="handleLogoff">注销</el-button>
        </div>

        <el-button v-has-role="'member-newAdd'" class="add-vip-btn" icon="CirclePlusFilled" @click="handleAddVip">新增会员</el-button>
      </div>
    </div>
  </div>
  <EditVip ref="editVipRef" v-if="editVisible" :visible="editVisible" @emitCancel="emitEditCancel"
    @emitSubmit="emitEditSubmit" />
  <Stored ref="storedRef" v-if="storedVisible" :visible="storedVisible" @emitCancel="emitStoredCancel"
    @emitSubmit="emitStoredSubmit" />
  <Adjust ref="adjustRef" v-if="adjustVisible" :visible="adjustVisible" @emitCancel="emitAdjustCancel"
    @emitSubmit="emitAdjustSubmit" />
  <Black ref="blackRef" v-if="blackVisible" :visible="blackVisible" @emitCancel="emitBlackCancel"
    @emitSubmit="emitBlackSubmit" />
  <Transfer ref="transferRef" v-if="transferVisible" :visible="transferVisible" @emitCancel="emitTransferCancel"
    @emitSubmit="emitTransferSubmit" />
  <Report ref="reportRef" v-if="reportVisible" :visible="reportVisible" @emitCancel="emitReportCancel"
    @emitSubmit="emitReportSubmit" />
  <Send ref="SendRef" v-if="SendVisible" :visible="SendVisible" @emitCancel="emitSendCancel"
    @emitSubmit="emitSendSubmit" />
  <Logoff ref="LogoffRef" v-if="LogoffVisible" :visible="LogoffVisible" @emitCancel="emitLogoffCancel"
    @emitSubmit="emitLogoffSubmit" />
  <Point ref="PointRef" v-if="PointVisible" :visible="PointVisible" @emitCancel="emitPointCancel"
    @emitSubmit="emitPointSubmit" />
</template>

<script setup>
import EditVip from '../components/editVip.vue'
import Stored from '../components/stored.vue'
import Adjust from '../components/adjust.vue'
import Black from '../components/black.vue'
import Transfer from '../components/transfer.vue'
import Report from '../components/report.vue'
import Send from '../components/send.vue'
import Logoff from '../components/logoffDialog.vue'
import Point from '../components/PointDialog.vue'
import { reactive, ref } from 'vue';
import Api from '@/api'
// import { useRouter } from 'vue-router'
import useConfigStore from '@/store/config'
const configStore = useConfigStore()
const { isUseBrandCard } = configStore.shopInfo

const router = useRouter()

let user = reactive({
  re: {
    // memberAvatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    name: '--',
    mobile: '--',
    sex: '--',
    birthday: '--',
    cardCount: '--',
    cardList: [
{ carNo: '--', carName: '--', cardImg: 'https://oss.jtmckj.com/pc/images/vip/vip1.png', currentAmtAct: '--', currentAmt: '--', currentPresentAmt: '--', currentCoins: '--', currentPoint: '--', openDate: '--', expireDate: '--', cardState: '--', consumeTotal: '--',ticketCount:'--' },
      // { carNo: 'NO203078c47c56', carName: '梦田音乐酒吧会员卡2', cardImg: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', currentAmtAct: 333.56, currentAmt: 1233.35, currentPresentAmt: 56.23, currentCoins: 5.35, currentPoint: 5.35, openDate: '2017-06-12 22:15:23', expireDate: '2018-06-12 22:15:23', cardState: '正常', consumeTotal: 12906.00,  },
    ],
  }
})
// 冻结 // 解冻
// 搜索会员
const mobile = ref('')
const search = () => {
  currentCard.value = 0
  // console.log(mobile.value)
  Api.Common.PcObjProcess.Do({ "functionName": "GetMemberInfo", "orgCode": "0004", "contentData": { "mobile": mobile.value } })
    .then(res => {
      console.log('搜索会员res :>> ', res);
      if (res.result == '') return ElNotification({
        title: '提示',
        message: '没找到会员',
        type: 'warning',
      })
      if (res.cardList && res.cardList.length == 0){

         ElNotification({
            title: '提示',
            message: '会员没有门店卡，请开卡',
            type: 'warning',
          })
          return
      }
      let cardList = []
      console.log('isUseBrandCard :>> ', isUseBrandCard);
      res.cardList.forEach(item => {
        if (!isUseBrandCard && item.cardType == '1') return
        cardList.push(item)
      })
      res.cardList = cardList
      user.re = res
      console.log('user.re :>> ', user.re);
      // console.log('card :>> ',user.re.cardList[0].cardName);
    })
}
const handleNum = (str) => {
  mobile.value += str
}
const handleDelLastNum = () => {
  mobile.value = mobile.value.slice(0, mobile.value.length - 1);
}
const handleDelNum = () => {
  mobile.value = ''
}
// 切换会员卡
let currentCard = ref(0)
const handleLeft = () => {
  if (currentCard.value > 0) {
    currentCard.value -= 1
  }
}
const handleRight = () => {
  if (currentCard.value < user.re.cardList.length - 1) {
    currentCard.value += 1
  }
}
// ---------按钮操作--------
// ----新增/编辑会员----
// 新增会员弹窗
let editVisible = ref(false)
const handleAddVip = (params) => {
  editVisible.value = true
}
// 编辑会员弹窗
const editVipRef = ref()
const handleEditVip = (params) => {
  if (!user.re.memberCode) return ElNotification({
    title: '提示',
    message: '请先查询会员信息',
    type: 'warning',
  })
  editVisible.value = true
  nextTick(() => {
    editVipRef.value.setForm(user.re, currentCard.value)
  });
}
// 取消编辑弹窗
const emitEditCancel = (params) => {
  // console.log(params)
  editVisible.value = false
}
// 提交编辑弹窗
const emitEditSubmit = (params) => {
  // console.log(params)
  editVisible.value = false
  mobile.value = params.mobile
  search()
}

// ----会员卡充值----
// 会员卡储值弹窗
let storedVisible = ref(false)
const storedRef = ref()
const handleStored = (params) => {
  if (!user.re.memberCode) return ElNotification({
    title: '提示',
    message: '请先查询会员信息',
    type: 'warning',
  })
  storedVisible.value = true
  nextTick(() => {
    const data = {
      user: user.re,
      currentCard: currentCard.value,
    }
    storedRef.value.open(data)
  });
}
// 取消充值弹窗
const emitStoredCancel = (params) => {
  console.log(params)
  storedVisible.value = false
}
// 提交充值弹窗
const emitStoredSubmit = (params) => {
  console.log(params)
  storedVisible.value = false
  search()
}

// ----会员卡调账----
// 调账弹窗
let adjustVisible = ref(false)
const adjustRef = ref()
const handleAdjust = (params) => {
  if (!user.re.memberCode) return ElNotification({
    title: '提示',
    message: '请先查询会员信息',
    type: 'warning',
  })
  adjustVisible.value = true
  nextTick(() => {
    const data = {
      user: user.re,
      currentCard: currentCard.value,
    }
    adjustRef.value.open(data)
  });
}
// 取消调账弹窗
const emitAdjustCancel = (params) => {
  console.log(params)
  adjustVisible.value = false
}
// 提交调账弹窗
const emitAdjustSubmit = (params) => {
  console.log(params)
  adjustVisible.value = false
  search()
}

// ----冻结解冻----
// 点击冻结解冻
const handleFreeze = (params) => {
  if (!user.re.memberCode) return ElNotification({
    title: '提示',
    message: '请先查询会员信息',
    type: 'warning',
  })
  let cardState = user.re.cardList[currentCard.value].cardState
  console.log('cardState :>> ', cardState);
  let data = {
    "no": user.re.cardList[currentCard.value].cardNo,
    // "state": null,
  }
  let msg = null
  if (cardState == '正常') {
    data.state = '2'
    msg = '冻结'
  } else if (cardState == '冻结') {
    data.state = '1'
    msg = '解冻'
  }
  Api.Common.PcObjProcess.Do({ "functionName": "UpdateMemberCar", "orgCode": "0004", "contentData": data }).then(res => {
    console.log('冻结解冻res :>> ', res);
    ElNotification({
      title: '提示',
      message: msg + '成功',
      type: 'success',
    })
    search()
  })
}


// ----黑名单----
// 黑名单弹窗
let blackVisible = ref(false)
const blackRef = ref()
const handleBlack = (params) => {
  if (!user.re.memberCode) return ElNotification({
    title: '提示',
    message: '请先查询会员信息',
    type: 'warning',
  })
  blackVisible.value = true
  nextTick(() => {
    const data = {
      user: user.re,
      currentCard: currentCard.value,
    }
    blackRef.value.open(data)
  });
}
// 取消黑名单弹窗
const emitBlackCancel = (params) => {
  console.log(params)
  blackVisible.value = false
}
// 提交黑名单弹窗
const emitBlackSubmit = (params) => {
  console.log(params)
  blackVisible.value = false
  search()
}

// ----资产转移----
// 资产转移弹窗
let transferVisible = ref(false)
const transferRef = ref()
const handleTransfer = (params) => {
  if (!user.re.memberCode) return ElNotification({
    title: '提示',
    message: '请先查询会员信息',
    type: 'warning',
  })
  transferVisible.value = true
  nextTick(() => {
    const data = {
      user: user.re,
      currentCard: currentCard.value,
    }
    transferRef.value.open(data)
  });
}
// 取消资产转移弹窗
const emitTransferCancel = (params) => {
  console.log(params)
  transferVisible.value = false
}
// 提交资产转移弹窗
const emitTransferSubmit = (params) => {
  console.log(params)
  transferVisible.value = false
  search()
}

// ----充值记录 交易流水 积分记录----
// 表格弹窗
let reportVisible = ref(false)
const reportRef = ref()
const handleReport = (name) => {
  if (!user.re.memberCode) return ElNotification({
    title: '提示',
    message: '请先查询会员信息',
    type: 'warning',
  })
  reportVisible.value = true
  nextTick(() => {
    const data = {
      user: user.re,
      currentCard: currentCard.value,
      activeName: name
    }
    reportRef.value.open(data)
  });
}
// 取消表格弹窗
const emitReportCancel = (params) => {
  console.log(params)
  reportVisible.value = false
}
// 提交表格弹窗
const emitReportSubmit = (params) => {
  console.log(params)
  reportVisible.value = false
}


// 升级会员权益
const handleLevelUp = (params) => {
  console.log('user.re.cardList[currentCard].cardNo :>> ', user.re.cardList[currentCard.value].cardNo);
  router.push({
    path: '/order/payment',
    query: {
      cardNo: user.re.cardList[currentCard.value].cardNo,
      price: user.re.cardList[currentCard.value].payCardAmt,
      todo: 'vipUpgrade'
    }
  })
}

// -----------------------赠金币/券-------------------
let SendVisible = ref(false)
const SendRef = ref()
const handleSend = (name) => {
  // if (!user.re.memberCode) return ElNotification({
  //   title: '提示',
  //   message: '请先查询会员信息',
  //   type: 'warning',
  // })
  SendVisible.value = true
  // nextTick(() => {
  //   const data = {
  //     user: user.re,
  //     currentCard: currentCard.value,
  //     activeName: name
  //   }
  //   SendRef.value.open(data)
  // });
}
// 取消表格弹窗
const emitSendCancel = (params) => {
  console.log(params)
  SendVisible.value = false
}
// 提交表格弹窗
const emitSendSubmit = (params) => {
  console.log(params)
  SendVisible.value = false
}

// 点击注销
let LogoffVisible = ref(false)
const LogoffRef = ref()
const handleLogoff = (name) => {
  if (!user.re.memberCode) return ElNotification({
    title: '提示',
    message: '请先查询会员信息',
    type: 'warning',
  })
  LogoffVisible.value = true
  nextTick(() => {
    LogoffRef.value.open(user.re)
  });
}
// 取消表格弹窗
const emitLogoffCancel = (params) => {
  console.log(params)
  LogoffVisible.value = false
}
// 提交表格弹窗
const emitLogoffSubmit = (params) => {
  console.log(params)
  LogoffVisible.value = false
}

// -----------------------------------金币兑换---------------------------
let PointVisible = ref(false)
const PointRef = ref()
const handlePoint = (name) => {
  // if (!user.re.memberCode) return ElNotification({
  //   title: '提示',
  //   message: '请先查询会员信息',
  //   type: 'warning',
  // })
  PointVisible.value = true
  // nextTick(() => {
  //   const data = {
  //     user: user.re,
  //     currentCard: currentCard.value,
  //     activeName: name
  //   }
  //   PointRef.value.open(data)
  // });
}
// 取消表格弹窗
const emitPointCancel = (params) => {
  console.log(params)
  PointVisible.value = false
}
// 提交表格弹窗
const emitPointSubmit = (params) => {
  console.log(params)
  PointVisible.value = false
}


</script>

<style  lang="scss" scoped>
// .main-container {
//   // padding: -20px;
// }

.main-box {
  display: flex;

  .left-box {

    // padding: 15px 45px;
    .vip-box {
      width: 646px;
      // height: 480px;
      background: #FFFFFF;
      border-radius: 8px;

      .vip-box-top {

        display: flex;
        padding: 20px 20px 20px 60px;

        .avatar {
          width: 200px;
          height: 200px;
        }

        .vip-name-box {
          margin-left: 16px;
          height: 150px;

          .name {
            width: 350px;
            margin-bottom: 16px;
            font-size: 20px;
          }

          .edit-btn {
            float: right;
            background: #FF6A00;
            border-radius: 4px;
            // font-size: 24px;
            color: #212121;
            border: 0;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
          }

          .disabled {
            color: #FFFFFF;
            background: #CCCCCC;
          }
        }
      }

      .vip-box-bottom {
        margin-top: 5px;
        padding: 0px 60px 20px;
        display: flex;
        align-items: center;
        // height: 160px;

        .left {
          width: 48px;
          height: 48px;
          background-image: url('https://oss.jtmckj.com/pc/images/vip/left.png');
          background-size: 48px 48px;
          background-repeat: no-repeat;
          background-position: center;
          cursor: pointer;
          margin-top: 32px;
        }

        .card {
          margin-left: 20px;
          margin-right: 20px;
          width: 390px;
          height: 200px;
          // background-image: url('https://oss.jtmckj.com/pc/images/vip/vip1.png');
          background-size: 390px 200px;
          background-repeat: no-repeat;
          background-position: center;
          border-radius: 15px;
          overflow: hidden;
          // background-color: #666666;

          .card-name {
            font-weight: bold;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 36px;
            margin-top: 70px;
            margin-left: 19px;
            width: 350px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; /* 超出部分显示省略号 */
          }
          .card-name:hover {
            overflow: visible; /* 鼠标悬停时显示全部文本 */
            white-space: nowrap; /* 正常换行显示 */
            text-overflow: clip; /* 移除省略号 */
            font-size: 24px;
            animation: scroll 5s linear infinite;
          }
          @keyframes scroll {
                  0% {
                    transform: translateX(5%);
                  }

                  100% {
                    transform: translateX(-40%);
                  }
          }
          .card-no {
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            // line-height: 36px;
            margin-top: 10px;
            margin-left: 19px;
          }

          .shengji {
            cursor: pointer;
            width: 120px;
            height: 40px;
            // margin-top: 20px;
            // margin-left: 19px;
          }

          .quanyi {
            width: 80px;
            height: 32px;
            margin-right: 10px;
          }

          .card-quanyi-box {
            color: #FFFFFF;
            margin-top: 10px;
            margin-left: 19px;
            display: flex;
            align-items: center;
          }
        }

        .disabled {
          filter: grayscale(100%);
        }

        .right {
          width: 48px;
          height: 48px;
          background-image: url('https://oss.jtmckj.com/pc/images/vip/right.png');
          background-size: 48px 48px;
          background-repeat: no-repeat;
          background-position: center;
          cursor: pointer;
          margin-top: 32px;
        }
      }

    }

    .vip-info-box {
      width: 646px;
      // height: 277px;
      background: #FFFFFF;
      border-radius: 8px;
      margin-top: 20px;
      padding-top: 15px;
      position: relative;

      .vip-info-total {
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;

        .total-num {
          font-weight: bold;
          font-size: 24px;
          color: #FF6A00;
          // line-height: 36px;
        }

        .total-font {

          font-weight: 400;
          font-size: 16px;
          color: #666666;
          margin-top: 3px;
          // line-height: 36px;
        }
      }

      .money-box {
        width: 526px;
        height: 82px;
        background: #FAFAFA;
        border-radius: 8px;
        margin: 0 60px;
        display: flex;
        justify-content: space-between;
        margin-top: 13px;

        .money {
          width: 131.5px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .money-num {
          font-weight: 400;
          font-size: 20px;
          color: #212121;
          line-height: 30px;
        }

        .money-font {
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          line-height: 30px;
        }
      }

      .card-date {
        display: flex;
        margin-top: 20px;
        padding-left: 80px;
        font-size: 16px;
        color: #212121;
      }

      .vip-info-box-disabled {
        width: 646px;
        height: 298px;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        // margin-top: 20px;
        padding-top: 20px;
        position: absolute;
        top: 0px;
      }
    }

    .left-action-row {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      // position: absolute;
      // bottom: 28px;

      .button {
        width: 150px;
        height: 60px;
        background: #FFE566;
        border-radius: 8px;
        font-weight: 400;
        font-size: 18px;
        color: #212121;
        border: 0;
      }
    }
  }

  .right-box {
    width: 660px;
    height: 860px;
    background: #FFFFFF;
    border-radius: 8px;
    margin-left: 60px;
    padding: 0 60px;

    .mobile-font {
      font-weight: bold;
      font-size: 24px;
      color: #212121;
      margin-top: 32px;
    }

    .mobile-tip {
      font-weight: 400;
      font-size: 12px;
      color: #666666;
      margin-top: 13px;
    }

    .input-box {
      margin-top: 20px;

      ::v-deep {

        .el-input__wrapper {
          background-color: #fff;
          border-radius: 8px 0px 0px 8px;
          height: 60px;
          font-size: 20px;
          color: #212121;
          border: 1px solid #E6E6E6 !important;
          border-right:none !important ;
        }

        .el-input-group__append {
          border-radius: 0px 8px 8px 0px;
          width: 100px;
          background-color: #FFE566;
          font-size: 18px;
          color: #212121;
          padding: 0;
        }
      }

      .search-btn {
        height: 60px;
        width: 100px;
      }
    }

    .search-button-div {
      float: right;
      margin-top: -50px;
      z-index: 20 !important;

      .search-button {
        width: 100px;
        height: 48px;
        background: #FFE566;
        border-radius: 8px;
        font-size: 18px;
        color: #212121;
        border: 0;
        right: 0px;
      }
    }

    .queue-right-btn {
      margin-top: 20px;

      .btn-items {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        .item {
          cursor: pointer;
          width: 120px;
          height: 96px;
          text-align: center;
          background: #E6E6E6;
          border-radius: 8px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 32px;
          color: #212121;
          line-height: 96px;
          margin-right: 20px;

          &.spe {
            background-image: url('https://oss.jtmckj.com/pc/images/queue/i_btn_del.png');
            background-size: 52px 40px;
            background-repeat: no-repeat;
            background-position: center;
          }
        }
      }

      :last-child {
        margin-bottom: 0px;
      }
    }

    .act-btn-box {
      display: flex;
      justify-content: space-between;

      ::v-deep {
        .el-button {
          padding: 0px;
        }
      }

      .act-btn {
        width: 160px;
        height: 60px;
        background-color: #FFD400;
        border-radius: 8px;
        font-size: 22px;
        color: #212121;
        border: 0;
      }

      .jiedong {
        background: #FF3333;
        color: #FFFFFF;
      }

      .disabled {
        color: #FFFFFF;
        background: #CCCCCC;
      }

      .zhuxiao {
        background: #CCCCCC;
      }
    }

    .add-vip-btn {
      margin-top: 40px;
      width: 540px;
      height: 60px;
      background: #FF6A00;
      border-radius: 8px;
      font-size: 24px;
      color: #FFFFFF;
      border: 0;
    }
  }
}

.font-size-14 {
  font-size: 14px;
}

.mb-15 {
  margin-bottom: 15px;
}
::v-deep(.el-radio__input.is-checked .el-radio__inner) {
        border-color: #ff6a00;
        /* 选中状态边框颜色 */
        background-color: #ffffff;
        /* 选中状态背景颜色 */
      }

      ::v-deep(.el-radio__inner:after) {
        background-color: #ff6a00;
        width: 8px;
        height: 8px;
      }
      ::v-deep .el-radio .el-radio__label {
        color: #212121 !important;
      }
</style>
